/* eslint-disable eqeqeq */
/* eslint-disable react/prop-types */
/* eslint-disable react/require-default-props */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable react/forbid-prop-types */
/* eslint-disable prettier/prettier */
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import IconFont from './IconFont';

const TabIcons = ({ tablist = [], active, setactive, column, style = {} }) => {
  return (
    <div style={{ width: '100%', height: 36, position: 'relative', ...style }}>
      <div
        style={{
          position: 'absolute',
          left: 0,
          top: 0,
          width: 36,
          height: 36,
          display: 'flex',
          alignItems: 'center',
        }}
      >
        <div
          style={{
            width: 36,
            height: 36,
            borderRadius: 4,
            backgroundColor: '#000000',
            transform: column
              ? `translateY(${54 * active}px)`
              : `translateX(${54 * active}px)`,
            transition: 'all 200ms ease-in-out',
          }}
        />
      </div>
      <div
        style={{
          height: column ? 360 : 36,
          display: 'flex',
          alignItems: 'center',
          position: 'absolute',
          flexDirection: column ? 'column' : 'row',
          zIndex: 12,
          left: 0,
          top: 0,
        }}
      >
        {tablist.map((it, i) => {
          return (
            <div
              className="menuitem"
              style={{
                marginRight: column ? 0 : 18,
                marginBottom: column ? 18 : 0,
              }}
              onClick={() => {
                setactive(i);
              }}
            >
              <IconFont
                type={it.icon}
                style={{
                  color: active == i ? '#f9f9f9' : '#676767',
                  fontSize: 18,
                }}
              />
            </div>
          );
        })}
      </div>
    </div>
  );
};
TabIcons.propTypes = {
  tablist: PropTypes.array.isRequired,
  active: PropTypes.number.isRequired,
  setactive: PropTypes.func.isRequired,
  column: PropTypes.bool.isRequired,
  style:PropTypes.object.isRequired
};

export default TabIcons;
